<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <title>表单练习</title>
</head>

<body>

    <input type="range" name="a" list="a-values">
    <datalist id="a-values">
        <option value="10" label="Low">
        <option value="90" label="High">
    </datalist>
    <input name=x type=range min=100 max=700 step=9 value=509>
    <select name="unittype" required>
        <option value=""> Select unit type </option>
        <option value="1"> Miner </option>
        <option value="2"> Puffer </option>
        <option value="3"> Snipey </option>
        <option value="4"> Max </option>
        <option value="5"> Firebot </option>
    </select>
    <label>
        Sex:
        <input name=sex list=sexes>
        <datalist id=sexes>
            <option value="Female">
            <option value="Male">
        </datalist>
    </label>
    <form action="courseselector.dll" method="get">
        <p>Which course would you like to watch today?
        </p>

        <label>Course:
            <select name="c">
                <optgroup label="8.01 Physics I: Classical Mechanics">
                    <option value="8.01.1">Lecture 01: Powers of Ten
                    <option value="8.01.2">Lecture 02: 1D Kinematics
                    <option value="8.01.3">Lecture 03: Vectors
                <optgroup label="8.02 Electricity and Magnestism">
                    <option value="8.02.1">Lecture 01: What holds our world together?
                    <option value="8.02.2">Lecture 02: Electric Field
                    <option value="8.02.3">Lecture 03: Electric Flux
                <optgroup label="8.03 Physics III: Vibrations and Waves">
                    <option value="8.03.1">Lecture 01: Periodic Phenomenon
                    <option value="8.03.2">Lecture 02: Beats
                    <option value="8.03.3">Lecture 03: Forced Oscillations with Damping
            </select>
        </label>
        <p>
            <input type=submit value="▶ Play">
        </p>
    </form>
    <p>如果您有任何意见，烦请告知我们：</p>
    <p>
        <textarea cols=80 name=comments></textarea>
    </p>
    <form action="processkey.cgi" method="post" enctype="multipart/form-data">
        <p>
            <keygen name="key">
        </p>
        <p>
            <input type=submit value="Submit key...">
        </p>
    </form>
    <form onsubmit="return false" oninput="o.value = a.valueAsNumber + b.valueAsNumber">
        <input name=a type=number step=any> +
        <input name=b type=number step=any> =
        <output name=o for="a b"></output>
    </form>
    <section>
        <h2>Task Progress</h2>
        <p>Progress:
            <progress id="p" max=100><span>0</span>%</progress>
        </p>
        <script>
            var progressBar = document.getElementById('p');

            function updateProgress(newValue) {
                progressBar.value = newValue;
                progressBar.getElementsByTagName('span')[0].textContent = newValue;
            }
            updateProgress(50);
        </script>
    </section>
    <p>The grapefruit pie had a radius of 12cm and a height of 2cm.
    </p>
    <dl>
        <dt>Radius:</dt>
        <dd>
            <meter min=0 max=20 value=12>12cm</meter>
        </dd>
        <dt>Height:</dt>
        <dd>
            <meter min=0 max=10 value=2>2cm</meter>
        </dd>
    </dl>
    <fieldset name="numfields">
        <legend>
            <label>
                <input type=radio checked name=clubtype onchange="form.numfields.disabled = !checked"> My card has
                numbers on it
            </label>
        </legend>
        <div>
            <label>Card number:
                <input name=clubnum required pattern="[-0-9]+">
            </label>
        </div>
    </fieldset>

</body>

</html>
